<template>
	<view class="container">
		<view class="top_bg">
			<view class="name">
				<image class="title_text" src="../../static/image/title.png"></image>
			</view>
			<image class="bg_img" src="../../static/image/top_img.png"></image>
			<view class="back">
				<!-- <view class="top_title">
					<view class="title_content">
						<view class="title_left" 
						:class="isActivelr === item.id ? 'title_left_active' : '' " 
						@click="handlelogin(item,index)" 
						v-for="(item ,index) in textlist" 
						:key="index"
						>{{ item.title }}</view>
					</view>
				</view> -->
			<!-- <c_login v-show="isActivelr === 0" /> -->
			<c_register  /> <!-- v-show="isActivelr === 1" -->
			</view>
		</view>
	</view>
</template>

<script>
	// import c_login from '../common/components/login.vue'
	import c_register from '../common/components/register.vue'
	export default {
		components:{
			// c_login,
			c_register
		},
		data() {
			return {
				checked: false,
				isActivelr:0,
				textlist:[
					{
						id:0,
						title:'登录'
					},
					{
						id:1,
						title:'注册'
					}
				]
			};
		},
		methods:{
			handlelogin(item,index){
				this.isActivelr = item.id
			},
			
			handleCode(data){
				console.log(data,'_data')
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $bg_color;
	}
	.container{
		width: 100%;
		@include flexBox(column);
		.top_bg {
			width: 100%;
			height: 184px;
			box-sizing: border-box;
			position: relative;
			.bg_img{
				width: 100%;
				height: 184px;
			}
		}
		.name{
			width: 340px;
			height: 90px;
			position: absolute;
			top: 0;
			z-index: 999;
			left: calc(50% - 170px);
			margin-top: $margin-top-30;
			@include centerAline();
			.title_text{
				width: 172px;
				height: 42px;
			}
		}
		.back{
			width: 340px;
			background-color: $white_color;
			position: absolute;
			top: 140px;
			left: calc(50% - 170px);
			border-radius: $radius_16;
			box-sizing: border-box;
			padding: 10px;
			.top_title{
				width: 100%;
				height: 30px;
				.title_content{
					width: 40%;
					height: 30px;
					margin: 0 auto;
					display: flex;
					.title_left{
						width: 50%;
						height: 30px;
						text-align: center;
						line-height: $line-height-30;
						font-size: $font-size-16;
					}
					.title_left_active{
						color: $primary_color;
						border-bottom: 3px solid $primary_color;
					}
				}
			}
		}
		
	}
</style>
